<template>
    <div class="searchTop">
        <svg class="icon" aria-hidden="true" @click="$router.go(-1)">
            <use xlink:href="#icon-zuojiantou"></use>
        </svg>
        <input type="text" placeholder="周杰伦" v-model="searchKey" @keydown.enter="enterKey">
    </div>
    <div class="searchHistory">
        <span class="searchSpan">历史</span>
        <span v-for="item in keyWordList" :key="item" class="spanKey" @click="searchHistory(item)">
            {{ item }}
        </span>
        <svg class="icon" aria-hidden="true" @click="delHistory">
            <use xlink:href="#icon-shanchu"></use>
        </svg>
    </div>
    <div class="itemList">
        <div class="item" v-for="(item, i) in searchList" :key="i">
            <div class="itemLeft" @click="updateIndex(item)">
                <span class="leftLeft">{{ i + 1 }}</span>
                <div class="leftRight">
                    <p>{{ item.name }}</p>
                    <p><span v-for="(item1, index) in item.ar" :key="index">
                        {{ item1.name }} &numsp;</span></p>

                </div>
            </div>
            <div class="itemRight">
                <div class="img1">
                    <svg class="icon" aria-hidden="true" v-if="item.mvid != 0">
                        <use xlink:href="#icon-bofang2"></use>
                    </svg>
                </div>
                <div class="img2">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-danlieliebiao"></use>
                    </svg>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
import { getSearchMusic } from '../service/home.js'
export default {
    data() {
        return {
            keyWordList: [],
            searchKey: "",
            searchList: []
        }
    },
    mounted() {
        this.keyWordList = JSON.parse(localStorage.getItem('keyWordList')) ? JSON.parse(localStorage.getItem('keyWordList')) : []
    },
    methods: {
        enterKey: async function () {
            if (this.searchKey !== "") {
                this.keyWordList.unshift(this.searchKey);
                //去重
                this.keyWordList = [...new Set(this.keyWordList)]
                //固定长度
                if (this.keyWordList.length > 10) {
                    this.keyWordList.splice(this.keyWordList.length - 1, 1)
                }
                localStorage.setItem("keyWordList", JSON.stringify(this.keyWordList))
                const res = await getSearchMusic(this.searchKey)
                console.log(res)
                this.searchList = res.data.result.songs
                this.searchKey = ""
            }

        },
        delHistory: function () {
            localStorage.removeItem("keyWordList")
            this.keyWordList = []
        },
        searchHistory: async function (item) {
            const res = await getSearchMusic(item)
            console.log(res)
        },
        updateIndex:function(item){
            item.al=item.album
            item.al.picUrl=item.album.artist.img1v1Url
            this.$store.commit("pushPlayList",item)
            this.$store.commit("updatePlayListIndex",this.$store.state.playList.length-1)
        }
    }
}
</script>

<style lang="less" scoped>
.searchTop {
    width: 100%;
    height: 1rem;
    padding: 0 .2rem;
    display: flex;
    align-items: center;

    input {
        margin-left: .2rem;
        border: none;
        border-bottom: 1px solid #999;
        width: 90%;
        padding: .1rem;
    }
}

.searchHistory {
    width: 100%;
    height: .2rem;
    position: relative;

    .searchSpan {
        // font-size: .4rem;s
        font-weight: 700;
    }

    .spanKey {
        padding: .1rem .2rem;
        background-color: rgb(185, 169, 169);
        border-radius: .4rem;
        margin: .1rem .2rem;
        display: inline-block;
    }

    .icon {
        width: .3rem;
        height: .3rem;
        position: absolute;
        right: .2rem;
    }
}

.itemList {
    width: 100%;
    height: 100%;

    // background-color: aqua;
    // display: flex;
    // flex-direction: column;
    margin-top: 1.2rem;
    padding-bottom: 1.2rem;
    .item {
        width: 95%;
        height: 1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        // background-color: #999;

        .itemLeft {
            width: 6rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            // background-color: #999;
            margin-left: .2rem;

            .leftRight {
                width: 5.6rem;
                display: flex;
                flex-direction: column;
                // justify-content:flex-start;
                // background-color: aqua;


                p {
                    font-weight: 800;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;

                }

                span {
                    // display: flex;
                    font-weight: 200;
                    font-size: .13rem;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    // background-color:bisque ;
                }
            }
        }

        .itemRight {
            width: 1.3rem;
            // background-color: red;

            .img1 {
                float: left;
            }

            .img2 {
                float: right;
            }
        }
    }
}
</style>